<template>
  <div class="security-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1>平台安全中心</h1>
      <p>全方位保障平台安全，确保用户权益和交易安全</p>
    </div>

    <!-- 功能导航 -->
    <div class="function-tabs">
      <button 
        v-for="tab in tabs" 
        :key="tab.id"
        :class="['tab-button', { active: activeTab === tab.id }]"
        @click="activeTab = tab.id"
      >
        <span class="tab-icon">{{ tab.icon }}</span>
        <span>{{ tab.name }}</span>
      </button>
    </div>

    <!-- 私教资质审核 -->
    <div v-if="activeTab === 'certification'" class="tab-content">
      <div class="section-header">
        <h2>私教资质审核系统</h2>
        <p>严格审核私教资质，确保专业性和安全性</p>
      </div>

      <!-- 审核统计 -->
      <div class="audit-stats">
        <div class="stat-card">
          <div class="stat-icon">📋</div>
          <div class="stat-content">
            <h3>待审核申请</h3>
            <div class="stat-value">23</div>
            <div class="stat-trend">+5 今日新增</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">✅</div>
          <div class="stat-content">
            <h3>审核通过率</h3>
            <div class="stat-value">78.5%</div>
            <div class="stat-trend">+2.3% 本月</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">⏱️</div>
          <div class="stat-content">
            <h3>平均审核时长</h3>
            <div class="stat-value">2.5天</div>
            <div class="stat-trend">-0.5天 本月</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">👨‍🏫</div>
          <div class="stat-content">
            <h3>认证私教总数</h3>
            <div class="stat-value">1,456</div>
            <div class="stat-trend">+89 本月</div>
          </div>
        </div>
      </div>

      <!-- 审核流程 -->
      <div class="audit-process">
        <h3>审核流程</h3>
        <div class="process-steps">
          <div v-for="(step, index) in auditSteps" :key="step.id" class="process-step">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-content">
              <h4>{{ step.title }}</h4>
              <p>{{ step.description }}</p>
              <div class="step-requirements">
                <h5>所需材料：</h5>
                <ul>
                  <li v-for="requirement in step.requirements" :key="requirement">{{ requirement }}</li>
                </ul>
              </div>
            </div>
            <div v-if="index < auditSteps.length - 1" class="step-arrow">→</div>
          </div>
        </div>
      </div>

      <!-- 待审核列表 -->
      <div class="pending-audits">
        <h3>待审核申请</h3>
        <div class="audit-filters">
          <select v-model="auditFilter">
            <option value="all">全部申请</option>
            <option value="pending">待审核</option>
            <option value="reviewing">审核中</option>
            <option value="approved">已通过</option>
            <option value="rejected">已拒绝</option>
          </select>
          <input type="text" v-model="searchKeyword" placeholder="搜索申请人姓名...">
        </div>
        <div class="audit-list">
          <div v-for="application in filteredApplications" :key="application.id" class="audit-item">
            <div class="applicant-info">
              <img :src="application.avatar" :alt="application.name" class="applicant-avatar">
              <div class="applicant-details">
                <h4>{{ application.name }}</h4>
                <p>{{ application.specialty }}</p>
                <div class="application-date">申请时间：{{ application.submitDate }}</div>
              </div>
            </div>
            <div class="certification-info">
              <div class="cert-item">
                <span class="cert-label">教练证书：</span>
                <span :class="['cert-status', application.certStatus]">{{ getCertStatusText(application.certStatus) }}</span>
              </div>
              <div class="cert-item">
                <span class="cert-label">身份验证：</span>
                <span :class="['cert-status', application.idStatus]">{{ getCertStatusText(application.idStatus) }}</span>
              </div>
              <div class="cert-item">
                <span class="cert-label">背景调查：</span>
                <span :class="['cert-status', application.backgroundStatus]">{{ getCertStatusText(application.backgroundStatus) }}</span>
              </div>
            </div>
            <div class="audit-actions">
              <button class="action-btn view" @click="viewApplication(application)">查看详情</button>
              <button v-if="application.status === 'pending'" class="action-btn approve" @click="approveApplication(application.id)">通过</button>
              <button v-if="application.status === 'pending'" class="action-btn reject" @click="rejectApplication(application.id)">拒绝</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 背景调查 -->
    <div v-if="activeTab === 'background'" class="tab-content">
      <div class="section-header">
        <h2>背景调查系统</h2>
        <p>全面的背景调查机制，确保私教的可信度和安全性</p>
      </div>

      <!-- 调查项目 -->
      <div class="investigation-items">
        <div v-for="item in investigationItems" :key="item.id" class="investigation-card">
          <div class="investigation-icon" :style="{ backgroundColor: item.color }">
            {{ item.icon }}
          </div>
          <div class="investigation-content">
            <h3>{{ item.title }}</h3>
            <p>{{ item.description }}</p>
            <div class="investigation-details">
              <div class="detail-item">
                <span class="detail-label">检查项目：</span>
                <span class="detail-value">{{ item.checkItems.length }}项</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">通过率：</span>
                <span class="detail-value">{{ item.passRate }}%</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">平均耗时：</span>
                <span class="detail-value">{{ item.avgTime }}</span>
              </div>
            </div>
            <div class="check-items">
              <h4>检查项目：</h4>
              <ul>
                <li v-for="checkItem in item.checkItems" :key="checkItem">{{ checkItem }}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <!-- 风险评估 -->
      <div class="risk-assessment">
        <h3>风险评估报告</h3>
        <div class="risk-metrics">
          <div class="risk-card low">
            <div class="risk-level">低风险</div>
            <div class="risk-count">1,234人</div>
            <div class="risk-percentage">85.2%</div>
          </div>
          <div class="risk-card medium">
            <div class="risk-level">中风险</div>
            <div class="risk-count">156人</div>
            <div class="risk-percentage">10.8%</div>
          </div>
          <div class="risk-card high">
            <div class="risk-level">高风险</div>
            <div class="risk-count">58人</div>
            <div class="risk-percentage">4.0%</div>
          </div>
        </div>
      </div>

      <!-- 黑名单管理 -->
      <div class="blacklist-management">
        <h3>黑名单管理</h3>
        <div class="blacklist-actions">
          <button class="action-button primary" @click="showAddBlacklistModal = true">添加黑名单</button>
          <button class="action-button secondary" @click="exportBlacklist">导出黑名单</button>
        </div>
        <div class="blacklist-table">
          <table>
            <thead>
              <tr>
                <th>姓名</th>
                <th>身份证号</th>
                <th>加入原因</th>
                <th>加入时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in blacklist" :key="item.id">
                <td>{{ item.name }}</td>
                <td>{{ item.idNumber }}</td>
                <td>{{ item.reason }}</td>
                <td>{{ item.addDate }}</td>
                <td>
                  <button class="table-action remove" @click="removeFromBlacklist(item.id)">移除</button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 交易安全 -->
    <div v-if="activeTab === 'transaction'" class="tab-content">
      <div class="section-header">
        <h2>交易安全系统</h2>
        <p>资金托管与纠纷处理，保障交易双方权益</p>
      </div>

      <!-- 交易概览 -->
      <div class="transaction-overview">
        <div class="overview-card">
          <div class="card-icon">💰</div>
          <div class="card-content">
            <h3>托管资金总额</h3>
            <div class="card-value">¥2,345,678</div>
            <div class="card-trend">+15.3% 本月</div>
          </div>
        </div>
        <div class="overview-card">
          <div class="card-icon">🔒</div>
          <div class="card-content">
            <h3>安全交易笔数</h3>
            <div class="card-value">15,234</div>
            <div class="card-trend">+8.7% 本月</div>
          </div>
        </div>
        <div class="overview-card">
          <div class="card-icon">⚖️</div>
          <div class="card-content">
            <h3>纠纷处理中</h3>
            <div class="card-value">12</div>
            <div class="card-trend">-3 本周</div>
          </div>
        </div>
        <div class="overview-card">
          <div class="card-icon">✅</div>
          <div class="card-content">
            <h3>纠纷解决率</h3>
            <div class="card-value">96.8%</div>
            <div class="card-trend">+1.2% 本月</div>
          </div>
        </div>
      </div>

      <!-- 资金托管流程 -->
      <div class="escrow-process">
        <h3>资金托管流程</h3>
        <div class="process-flow">
          <div v-for="(step, index) in escrowSteps" :key="step.id" class="flow-step">
            <div class="step-icon" :style="{ backgroundColor: step.color }">{{ step.icon }}</div>
            <div class="step-info">
              <h4>{{ step.title }}</h4>
              <p>{{ step.description }}</p>
            </div>
            <div v-if="index < escrowSteps.length - 1" class="flow-arrow">↓</div>
          </div>
        </div>
      </div>

      <!-- 纠纷处理 -->
      <div class="dispute-handling">
        <h3>纠纷处理中心</h3>
        <div class="dispute-filters">
          <select v-model="disputeFilter">
            <option value="all">全部纠纷</option>
            <option value="pending">待处理</option>
            <option value="investigating">调查中</option>
            <option value="resolved">已解决</option>
          </select>
          <select v-model="disputeType">
            <option value="all">全部类型</option>
            <option value="refund">退款纠纷</option>
            <option value="service">服务纠纷</option>
            <option value="quality">质量纠纷</option>
          </select>
        </div>
        <div class="dispute-list">
          <div v-for="dispute in filteredDisputes" :key="dispute.id" class="dispute-item">
            <div class="dispute-header">
              <div class="dispute-id">纠纷编号：{{ dispute.id }}</div>
              <div :class="['dispute-status', dispute.status]">{{ getDisputeStatusText(dispute.status) }}</div>
            </div>
            <div class="dispute-details">
              <div class="dispute-parties">
                <div class="party">
                  <span class="party-label">用户：</span>
                  <span class="party-name">{{ dispute.user }}</span>
                </div>
                <div class="party">
                  <span class="party-label">私教：</span>
                  <span class="party-name">{{ dispute.trainer }}</span>
                </div>
              </div>
              <div class="dispute-info">
                <div class="info-item">
                  <span class="info-label">纠纷类型：</span>
                  <span class="info-value">{{ dispute.type }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">涉及金额：</span>
                  <span class="info-value">¥{{ dispute.amount }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">创建时间：</span>
                  <span class="info-value">{{ dispute.createDate }}</span>
                </div>
              </div>
            </div>
            <div class="dispute-description">
              <h5>纠纷描述：</h5>
              <p>{{ dispute.description }}</p>
            </div>
            <div class="dispute-actions">
              <button class="action-btn view" @click="viewDispute(dispute)">查看详情</button>
              <button v-if="dispute.status === 'pending'" class="action-btn process" @click="processDispute(dispute.id)">开始处理</button>
              <button v-if="dispute.status === 'investigating'" class="action-btn resolve" @click="resolveDispute(dispute.id)">标记解决</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据安全 -->
    <div v-if="activeTab === 'data'" class="tab-content">
      <div class="section-header">
        <h2>数据安全中心</h2>
        <p>全面保护用户隐私和数据安全</p>
      </div>

      <!-- 安全指标 -->
      <div class="security-metrics">
        <div class="metric-card">
          <div class="metric-icon">🛡️</div>
          <div class="metric-content">
            <h3>数据加密率</h3>
            <div class="metric-value">100%</div>
            <div class="metric-status secure">安全</div>
          </div>
        </div>
        <div class="metric-card">
          <div class="metric-icon">🔐</div>
          <div class="metric-content">
            <h3>访问控制</h3>
            <div class="metric-value">严格</div>
            <div class="metric-status secure">正常</div>
          </div>
        </div>
        <div class="metric-card">
          <div class="metric-icon">📊</div>
          <div class="metric-content">
            <h3>数据备份</h3>
            <div class="metric-value">实时</div>
            <div class="metric-status secure">正常</div>
          </div>
        </div>
        <div class="metric-card">
          <div class="metric-icon">🚨</div>
          <div class="metric-content">
            <h3>安全事件</h3>
            <div class="metric-value">0</div>
            <div class="metric-status secure">安全</div>
          </div>
        </div>
      </div>

      <!-- 隐私保护措施 -->
      <div class="privacy-measures">
        <h3>隐私保护措施</h3>
        <div class="measures-grid">
          <div v-for="measure in privacyMeasures" :key="measure.id" class="measure-card">
            <div class="measure-icon">{{ measure.icon }}</div>
            <h4>{{ measure.title }}</h4>
            <p>{{ measure.description }}</p>
            <div class="measure-status">
              <span :class="['status-indicator', measure.status]"></span>
              <span class="status-text">{{ getStatusText(measure.status) }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 安全日志 -->
      <div class="security-logs">
        <h3>安全日志</h3>
        <div class="log-filters">
          <select v-model="logLevel">
            <option value="all">全部级别</option>
            <option value="info">信息</option>
            <option value="warning">警告</option>
            <option value="error">错误</option>
          </select>
          <input type="date" v-model="logDate">
        </div>
        <div class="log-list">
          <div v-for="log in filteredLogs" :key="log.id" :class="['log-item', log.level]">
            <div class="log-time">{{ log.timestamp }}</div>
            <div class="log-level">{{ log.level.toUpperCase() }}</div>
            <div class="log-message">{{ log.message }}</div>
            <div class="log-source">{{ log.source }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 添加黑名单模态框 -->
    <div v-if="showAddBlacklistModal" class="modal-overlay" @click="showAddBlacklistModal = false">
      <div class="modal-content" @click.stop>
        <div class="modal-header">
          <h3>添加黑名单</h3>
          <button class="close-button" @click="showAddBlacklistModal = false">×</button>
        </div>
        <div class="modal-body">
          <form @submit.prevent="addToBlacklist">
            <div class="form-group">
              <label>姓名</label>
              <input type="text" v-model="blacklistForm.name" required>
            </div>
            <div class="form-group">
              <label>身份证号</label>
              <input type="text" v-model="blacklistForm.idNumber" required>
            </div>
            <div class="form-group">
              <label>加入原因</label>
              <select v-model="blacklistForm.reason" required>
                <option value="">请选择原因</option>
                <option value="fraud">欺诈行为</option>
                <option value="violence">暴力行为</option>
                <option value="harassment">骚扰行为</option>
                <option value="fake-cert">虚假证书</option>
                <option value="other">其他</option>
              </select>
            </div>
            <div class="form-group">
              <label>详细说明</label>
              <textarea v-model="blacklistForm.description" rows="4" required></textarea>
            </div>
            <div class="form-actions">
              <button type="button" @click="showAddBlacklistModal = false">取消</button>
              <button type="submit" class="primary">添加</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SecurityView',
  data() {
    return {
      activeTab: 'certification',
      auditFilter: 'all',
      searchKeyword: '',
      disputeFilter: 'all',
      disputeType: 'all',
      logLevel: 'all',
      logDate: '',
      showAddBlacklistModal: false,
      
      tabs: [
        { id: 'certification', name: '资质审核', icon: '📋' },
        { id: 'background', name: '背景调查', icon: '🔍' },
        { id: 'transaction', name: '交易安全', icon: '💰' },
        { id: 'data', name: '数据安全', icon: '🛡️' }
      ],
      
      auditSteps: [
        {
          id: 1,
          title: '基础信息审核',
          description: '验证申请人的基本身份信息和联系方式',
          requirements: [
            '身份证正反面照片',
            '个人近期免冠照片',
            '手机号码验证',
            '邮箱地址验证'
          ]
        },
        {
          id: 2,
          title: '专业资质验证',
          description: '核实申请人的专业证书和培训经历',
          requirements: [
            '健身教练资格证书',
            '相关专业学历证明',
            '培训机构证明',
            '继续教育证明'
          ]
        },
        {
          id: 3,
          title: '背景调查',
          description: '进行全面的背景调查和信用检查',
          requirements: [
            '无犯罪记录证明',
            '信用报告',
            '前雇主推荐信',
            '客户评价记录'
          ]
        },
        {
          id: 4,
          title: '面试评估',
          description: '通过视频面试评估专业能力和沟通技巧',
          requirements: [
            '专业知识测试',
            '实操演示',
            '沟通能力评估',
            '服务态度评估'
          ]
        }
      ],
      
      applications: [
        {
          id: 1,
          name: '张健',
          avatar: 'https://via.placeholder.com/50',
          specialty: '力量训练',
          submitDate: '2024-01-15',
          status: 'pending',
          certStatus: 'verified',
          idStatus: 'verified',
          backgroundStatus: 'pending'
        },
        {
          id: 2,
          name: '李美丽',
          avatar: 'https://via.placeholder.com/50',
          specialty: '瑜伽普拉提',
          submitDate: '2024-01-14',
          status: 'reviewing',
          certStatus: 'verified',
          idStatus: 'verified',
          backgroundStatus: 'verified'
        },
        {
          id: 3,
          name: '王强',
          avatar: 'https://via.placeholder.com/50',
          specialty: '减脂训练',
          submitDate: '2024-01-13',
          status: 'pending',
          certStatus: 'pending',
          idStatus: 'verified',
          backgroundStatus: 'pending'
        }
      ],
      
      investigationItems: [
        {
          id: 1,
          title: '身份验证',
          description: '核实申请人的真实身份信息',
          icon: '🆔',
          color: '#3498db',
          passRate: 98.5,
          avgTime: '1-2小时',
          checkItems: [
            '身份证真伪验证',
            '人脸识别比对',
            '公安系统核查',
            '黑名单筛查'
          ]
        },
        {
          id: 2,
          title: '犯罪记录查询',
          description: '查询申请人的犯罪记录和法律纠纷',
          icon: '⚖️',
          color: '#e74c3c',
          passRate: 94.2,
          avgTime: '1-3天',
          checkItems: [
            '刑事犯罪记录',
            '民事纠纷记录',
            '行政处罚记录',
            '失信被执行人'
          ]
        },
        {
          id: 3,
          title: '信用评估',
          description: '评估申请人的信用状况和财务状况',
          icon: '💳',
          color: '#f39c12',
          passRate: 89.7,
          avgTime: '2-4小时',
          checkItems: [
            '征信报告查询',
            '银行流水验证',
            '负债情况评估',
            '还款能力分析'
          ]
        },
        {
          id: 4,
          title: '职业背景',
          description: '核实申请人的工作经历和专业背景',
          icon: '💼',
          color: '#27ae60',
          passRate: 92.1,
          avgTime: '3-5天',
          checkItems: [
            '工作经历验证',
            '前雇主联系',
            '同事推荐',
            '客户评价'
          ]
        }
      ],
      
      blacklist: [
        {
          id: 1,
          name: '张某某',
          idNumber: '110101199001011234',
          reason: '欺诈行为',
          addDate: '2024-01-10'
        },
        {
          id: 2,
          name: '李某某',
          idNumber: '110101199002025678',
          reason: '虚假证书',
          addDate: '2024-01-08'
        }
      ],
      
      escrowSteps: [
        {
          id: 1,
          title: '用户付款',
          description: '用户选择课程并完成付款',
          icon: '💳',
          color: '#3498db'
        },
        {
          id: 2,
          title: '资金托管',
          description: '付款资金进入平台托管账户',
          icon: '🏦',
          color: '#f39c12'
        },
        {
          id: 3,
          title: '服务确认',
          description: '私教提供服务，用户确认完成',
          icon: '✅',
          color: '#27ae60'
        },
        {
          id: 4,
          title: '资金释放',
          description: '确认无误后，资金释放给私教',
          icon: '💰',
          color: '#e74c3c'
        }
      ],
      
      disputes: [
        {
          id: 'D2024001',
          user: '张小明',
          trainer: '李教练',
          type: '服务纠纷',
          amount: 1200,
          status: 'pending',
          createDate: '2024-01-15',
          description: '私教迟到30分钟，且训练内容与约定不符'
        },
        {
          id: 'D2024002',
          user: '王小红',
          trainer: '陈教练',
          type: '退款纠纷',
          amount: 800,
          status: 'investigating',
          createDate: '2024-01-14',
          description: '因个人原因需要退课，但私教拒绝退款'
        }
      ],
      
      privacyMeasures: [
        {
          id: 1,
          title: '数据加密',
          description: '所有敏感数据采用AES-256加密存储',
          icon: '🔐',
          status: 'active'
        },
        {
          id: 2,
          title: '访问控制',
          description: '基于角色的权限管理和多因子认证',
          icon: '🔑',
          status: 'active'
        },
        {
          id: 3,
          title: '数据脱敏',
          description: '对外展示数据进行脱敏处理',
          icon: '👁️',
          status: 'active'
        },
        {
          id: 4,
          title: '审计日志',
          description: '完整记录所有数据访问和操作日志',
          icon: '📝',
          status: 'active'
        }
      ],
      
      securityLogs: [
        {
          id: 1,
          timestamp: '2024-01-15 14:30:25',
          level: 'info',
          message: '用户登录成功',
          source: 'AuthService'
        },
        {
          id: 2,
          timestamp: '2024-01-15 14:25:10',
          level: 'warning',
          message: '检测到异常登录尝试',
          source: 'SecurityMonitor'
        },
        {
          id: 3,
          timestamp: '2024-01-15 14:20:05',
          level: 'error',
          message: '数据库连接超时',
          source: 'DatabaseService'
        }
      ],
      
      blacklistForm: {
        name: '',
        idNumber: '',
        reason: '',
        description: ''
      }
    }
  },
  
  computed: {
    filteredApplications() {
      let filtered = this.applications;
      
      if (this.auditFilter !== 'all') {
        filtered = filtered.filter(app => app.status === this.auditFilter);
      }
      
      if (this.searchKeyword) {
        filtered = filtered.filter(app => 
          app.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
        );
      }
      
      return filtered;
    },
    
    filteredDisputes() {
      let filtered = this.disputes;
      
      if (this.disputeFilter !== 'all') {
        filtered = filtered.filter(dispute => dispute.status === this.disputeFilter);
      }
      
      if (this.disputeType !== 'all') {
        filtered = filtered.filter(dispute => dispute.type === this.disputeType);
      }
      
      return filtered;
    },
    
    filteredLogs() {
      let filtered = this.securityLogs;
      
      if (this.logLevel !== 'all') {
        filtered = filtered.filter(log => log.level === this.logLevel);
      }
      
      if (this.logDate) {
        filtered = filtered.filter(log => log.timestamp.includes(this.logDate));
      }
      
      return filtered;
    }
  },
  
  methods: {
    getCertStatusText(status) {
      const statusMap = {
        pending: '待审核',
        verified: '已验证',
        rejected: '已拒绝'
      };
      return statusMap[status] || status;
    },
    
    getDisputeStatusText(status) {
      const statusMap = {
        pending: '待处理',
        investigating: '调查中',
        resolved: '已解决'
      };
      return statusMap[status] || status;
    },
    
    getStatusText(status) {
      const statusMap = {
        active: '正常运行',
        warning: '需要关注',
        error: '存在问题'
      };
      return statusMap[status] || status;
    },
    
    viewApplication(application) {
      console.log('查看申请详情:', application);
      alert(`查看 ${application.name} 的申请详情`);
    },
    
    approveApplication(id) {
      console.log('通过申请:', id);
      const application = this.applications.find(app => app.id === id);
      if (application) {
        application.status = 'approved';
        alert('申请已通过');
      }
    },
    
    rejectApplication(id) {
      console.log('拒绝申请:', id);
      const application = this.applications.find(app => app.id === id);
      if (application) {
        application.status = 'rejected';
        alert('申请已拒绝');
      }
    },
    
    viewDispute(dispute) {
      console.log('查看纠纷详情:', dispute);
      alert(`查看纠纷 ${dispute.id} 的详情`);
    },
    
    processDispute(id) {
      console.log('开始处理纠纷:', id);
      const dispute = this.disputes.find(d => d.id === id);
      if (dispute) {
        dispute.status = 'investigating';
        alert('已开始处理纠纷');
      }
    },
    
    resolveDispute(id) {
      console.log('解决纠纷:', id);
      const dispute = this.disputes.find(d => d.id === id);
      if (dispute) {
        dispute.status = 'resolved';
        alert('纠纷已标记为解决');
      }
    },
    
    addToBlacklist() {
      console.log('添加黑名单:', this.blacklistForm);
      const newItem = {
        id: this.blacklist.length + 1,
        name: this.blacklistForm.name,
        idNumber: this.blacklistForm.idNumber,
        reason: this.blacklistForm.reason,
        addDate: new Date().toISOString().split('T')[0]
      };
      this.blacklist.push(newItem);
      this.showAddBlacklistModal = false;
      this.blacklistForm = { name: '', idNumber: '', reason: '', description: '' };
      alert('已添加到黑名单');
    },
    
    removeFromBlacklist(id) {
      console.log('移除黑名单:', id);
      const index = this.blacklist.findIndex(item => item.id === id);
      if (index > -1) {
        this.blacklist.splice(index, 1);
        alert('已从黑名单移除');
      }
    },
    
    exportBlacklist() {
      console.log('导出黑名单');
      alert('正在导出黑名单数据...');
    }
  }
}
</script>

<style scoped>
.security-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
}

.page-header h1 {
  color: #2c3e50;
  margin-bottom: 10px;
  font-size: 32px;
}

.page-header p {
  color: #7f8c8d;
  font-size: 16px;
}

.function-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  border-bottom: 2px solid #ecf0f1;
}

.tab-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 15px 25px;
  border: none;
  background: none;
  color: #7f8c8d;
  font-size: 16px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.tab-button:hover {
  color: #3498db;
}

.tab-button.active {
  color: #3498db;
  border-bottom-color: #3498db;
}

.tab-icon {
  font-size: 20px;
}

.tab-content {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.section-header {
  text-align: center;
  margin-bottom: 30px;
}

.section-header h2 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.section-header p {
  color: #7f8c8d;
}

.audit-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
}

.stat-content h3 {
  color: #7f8c8d;
  font-size: 14px;
  margin: 0 0 8px 0;
  font-weight: normal;
}

.stat-value {
  color: #2c3e50;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-trend {
  color: #27ae60;
  font-size: 14px;
  font-weight: bold;
}

.audit-process {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.audit-process h3 {
  color: #2c3e50;
  margin-bottom: 25px;
  text-align: center;
}

.process-steps {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  overflow-x: auto;
  padding: 20px 0;
}

.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 250px;
  text-align: center;
}

.step-number {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 15px;
}

.step-content h4 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.step-content p {
  color: #7f8c8d;
  margin-bottom: 15px;
  line-height: 1.5;
}

.step-requirements h5 {
  color: #2c3e50;
  margin-bottom: 8px;
  font-size: 14px;
}

.step-requirements ul {
  text-align: left;
  margin: 0;
  padding-left: 20px;
}

.step-requirements li {
  color: #555;
  font-size: 13px;
  margin-bottom: 4px;
}

.step-arrow {
  font-size: 24px;
  color: #3498db;
  margin: 20px 10px 0 10px;
}

.pending-audits {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.pending-audits h3 {
  color: #2c3e50;
  margin-bottom: 25px;
  text-align: center;
}

.audit-filters {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.audit-filters select,
.audit-filters input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.audit-filters input {
  flex: 1;
}

.audit-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.audit-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border: 1px solid #ecf0f1;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.audit-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.applicant-info {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 200px;
}

.applicant-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.applicant-details h4 {
  color: #2c3e50;
  margin: 0 0 5px 0;
}

.applicant-details p {
  color: #7f8c8d;
  margin: 0 0 5px 0;
  font-size: 14px;
}

.application-date {
  color: #95a5a6;
  font-size: 12px;
}

.certification-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cert-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.cert-label {
  color: #7f8c8d;
  min-width: 80px;
}

.cert-status {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.cert-status.verified {
  background: #d4edda;
  color: #155724;
}

.cert-status.pending {
  background: #fff3cd;
  color: #856404;
}

.cert-status.rejected {
  background: #f8d7da;
  color: #721c24;
}

.audit-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.3s ease;
}

.action-btn.view {
  background: #3498db;
  color: white;
}

.action-btn.approve {
  background: #27ae60;
  color: white;
}

.action-btn.reject {
  background: #e74c3c;
  color: white;
}

.action-btn:hover {
  transform: translateY(-1px);
}

.investigation-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.investigation-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 20px;
}

.investigation-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  flex-shrink: 0;
}

.investigation-content {
  flex: 1;
}

.investigation-content h3 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.investigation-content p {
  color: #7f8c8d;
  margin-bottom: 15px;
  line-height: 1.5;
}

.investigation-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 15px;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 6px;
}

.detail-item {
  text-align: center;
  font-size: 12px;
}

.detail-label {
  display: block;
  color: #7f8c8d;
  margin-bottom: 2px;
}

.detail-value {
  color: #2c3e50;
  font-weight: bold;
}

.check-items h4 {
  color: #2c3e50;
  margin: 0 0 8px 0;
  font-size: 14px;
}

.check-items ul {
  margin: 0;
  padding-left: 16px;
}

.check-items li {
  color: #555;
  font-size: 13px;
  margin-bottom: 3px;
}

.risk-assessment {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.risk-assessment h3 {
  color: #2c3e50;
  margin-bottom: 25px;
  text-align: center;
}

.risk-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.risk-card {
  text-align: center;
  padding: 25px;
  border-radius: 12px;
  color: white;
}

.risk-card.low {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.risk-card.medium {
  background: linear-gradient(135deg, #f39c12, #e67e22);
}

.risk-card.high {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
}

.risk-level {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.risk-count {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.risk-percentage {
  font-size: 14px;
  opacity: 0.9;
}

.blacklist-management {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.blacklist-management h3 {
  color: #2c3e50;
  margin-bottom: 25px;
  text-align: center;
}

.blacklist-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.action-button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.action-button.primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.action-button.secondary {
  background: #ecf0f1;
  color: #7f8c8d;
}

.action-button:hover {
  transform: translateY(-1px);
}

.blacklist-table {
  overflow-x: auto;
}

.blacklist-table table {
  width: 100%;
  border-collapse: collapse;
}

.blacklist-table th,
.blacklist-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ecf0f1;
}

.blacklist-table th {
  background: #f8f9fa;
  color: #2c3e50;
  font-weight: bold;
}

.table-action {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}

.table-action.remove {
  background: #e74c3c;
  color: white;
}

.transaction-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.overview-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 20px;
}

.card-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
}

.card-content h3 {
  color: #7f8c8d;
  font-size: 14px;
  margin: 0 0 8px 0;
  font-weight: normal;
}

.card-value {
  color: #2c3e50;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.card-trend {
  color: #27ae60;
  font-size: 14px;
  font-weight: bold;
}

.escrow-process {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.escrow-process h3 {
  color: #2c3e50;
  margin-bottom: 25px;
  text-align: center;
}

.process-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 300px;
}

.step-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  margin-bottom: 15px;
}

.step-info h4 {
  color: #2c3e50;
  margin-bottom: 8px;
}

.step-info p {
  color: #7f8c8d;
  line-height: 1.5;
}

.flow-arrow {
  font-size: 24px;
  color: #3498db;
  margin: 10px 0;
}

.dispute-handling {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dispute-handling h3 {
  color: #2c3e50;
  margin-bottom: 25px;
  text-align: center;
}

.dispute-filters {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.dispute-filters select {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.dispute-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.dispute-item {
  padding: 20px;
  border: 1px solid #ecf0f1;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.dispute-item:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.dispute-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.dispute-id {
  font-weight: bold;
  color: #2c3e50;
}

.dispute-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.dispute-status.pending {
  background: #fff3cd;
  color: #856404;
}

.dispute-status.investigating {
  background: #cce5ff;
  color: #004085;
}

.dispute-status.resolved {
  background: #d4edda;
  color: #155724;
}

.dispute-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.dispute-parties {
  display: flex;
  gap: 20px;
}

.party {
  font-size: 14px;
}

.party-label {
  color: #7f8c8d;
}

.party-name {
  color: #2c3e50;
  font-weight: bold;
}

.dispute-info {
  display: flex;
  gap: 20px;
}

.info-item {
  font-size: 14px;
}

.info-label {
  color: #7f8c8d;
}

.info-value {
  color: #2c3e50;
  font-weight: bold;
}

.dispute-description {
  margin-bottom: 15px;
}

.dispute-description h5 {
  color: #2c3e50;
  margin: 0 0 8px 0;
  font-size: 14px;
}

.dispute-description p {
  color: #555;
  line-height: 1.5;
  margin: 0;
}

.dispute-actions {
  display: flex;
  gap: 10px;
}

.action-btn.process {
  background: #f39c12;
  color: white;
}

.action-btn.resolve {
  background: #27ae60;
  color: white;
}

.security-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.metric-card {
  background: white;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 20px;
}

.metric-icon {
  font-size: 32px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
}

.metric-content h3 {
  color: #7f8c8d;
  font-size: 14px;
  margin: 0 0 8px 0;
  font-weight: normal;
}

.metric-value {
  color: #2c3e50;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.metric-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: bold;
}

.metric-status.secure {
  background: #d4edda;
  color: #155724;
}

.privacy-measures {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}

.privacy-measures h3 {
  color: #2c3e50;
  margin-bottom: 25px;
  text-align: center;
}

.measures-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.measure-card {
  text-align: center;
  padding: 25px;
  border: 1px solid #ecf0f1;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.measure-card:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.measure-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.measure-card h4 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.measure-card p {
  color: #7f8c8d;
  margin-bottom: 15px;
  line-height: 1.5;
}

.measure-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.status-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.status-indicator.active {
  background: #27ae60;
}

.status-indicator.warning {
  background: #f39c12;
}

.status-indicator.error {
  background: #e74c3c;
}

.status-text {
  color: #2c3e50;
  font-size: 14px;
}

.security-logs {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.security-logs h3 {
  color: #2c3e50;
  margin-bottom: 25px;
  text-align: center;
}

.log-filters {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.log-filters select,
.log-filters input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
}

.log-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
}

.log-item {
  display: grid;
  grid-template-columns: 150px 80px 1fr 120px;
  gap: 15px;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  align-items: center;
}

.log-item.info {
  background: #f8f9fa;
  border-left: 4px solid #3498db;
}

.log-item.warning {
  background: #fff3cd;
  border-left: 4px solid #f39c12;
}

.log-item.error {
  background: #f8d7da;
  border-left: 4px solid #e74c3c;
}

.log-time {
  color: #7f8c8d;
  font-family: monospace;
}

.log-level {
  font-weight: bold;
  text-transform: uppercase;
}

.log-item.info .log-level {
  color: #3498db;
}

.log-item.warning .log-level {
  color: #f39c12;
}

.log-item.error .log-level {
  color: #e74c3c;
}

.log-message {
  color: #2c3e50;
}

.log-source {
  color: #7f8c8d;
  font-style: italic;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 25px;
  border-bottom: 1px solid #ecf0f1;
}

.modal-header h3 {
  color: #2c3e50;
  margin: 0;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  color: #7f8c8d;
  cursor: pointer;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button:hover {
  color: #e74c3c;
}

.modal-body {
  padding: 25px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  color: #2c3e50;
  margin-bottom: 8px;
  font-weight: bold;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 25px;
}

.form-actions button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-actions button[type="button"] {
  background: #ecf0f1;
  color: #7f8c8d;
}

.form-actions button.primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
}

.form-actions button:hover {
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .security-container {
    padding: 15px;
  }
  
  .function-tabs {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .tab-button {
    padding: 12px 20px;
    font-size: 14px;
  }
  
  .audit-stats,
  .transaction-overview,
  .security-metrics {
    grid-template-columns: 1fr;
  }
  
  .process-steps {
    flex-direction: column;
    align-items: center;
  }
  
  .step-arrow {
    transform: rotate(90deg);
    margin: 10px 0;
  }
  
  .dispute-details {
    flex-direction: column;
    gap: 10px;
  }
  
  .dispute-parties {
    flex-direction: column;
    gap: 5px;
  }
  
  .dispute-info {
    flex-direction: column;
    gap: 5px;
  }
  
  .log-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .audit-filters,
  .dispute-filters,
  .log-filters {
    flex-direction: column;
  }
  
  .blacklist-actions {
    flex-direction: column;
  }
  
  .modal-content {
    width: 95%;
    margin: 20px;
  }
}

@media (max-width: 480px) {
  .page-header h1 {
    font-size: 24px;
  }
  
  .stat-card,
  .overview-card,
  .metric-card {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .investigation-card {
    flex-direction: column;
    text-align: center;
  }
  
  .investigation-details {
    grid-template-columns: 1fr;
  }
  
  .risk-metrics {
    grid-template-columns: 1fr;
  }
  
  .measures-grid {
    grid-template-columns: 1fr;
  }
  
  .audit-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .audit-actions {
    flex-direction: row;
    width: 100%;
  }
  
  .audit-actions .action-btn {
    flex: 1;
  }
}
</style>